<template>
    <div>
        <div class="brand_content">
            <div class="subtitle_context"></div>
            <div class="swiper-tab" v-if="brandList.length > 0">
                <div class="brand_box" v-for="(item,index) in brandList">
                    <div :class="[currentTab==index?'brand_image_box_click':'brand_image_box']" @click="swichNav(index,item.id)">
                        <img :src="item.logo" style="height:100%;width:100%">
                    </div>
                    <div :class="[currentTab==index?'brand_text':'brand_text_click']">{{item.name}}</div>
                </div>
            </div>
            <div class="brand_item_box">
                <div class="brand_item" v-for="item in products">
                    <div class="brand_item_image">
                        <img src="http://cdnx.rzico.com/upload/20200511/1.jpg" style="width:100%;height:100%" />
                    </div>
                    <div class="brand_item_text">{{item.name}}</div>
                    <div class="brand_item_price">¥{{item.price}}</div>
                </div>
                <no-data v-if="products.length==0"></no-data>
            </div>
        </div>
    </div>
</template>

<script>
import noData from "../product/components/noData";
import { list } from "../../../../api/brand";
import { productList } from "../../../../api/product";
import utils from "../../../../utils/utils";

export default {
    name: "brand",
    data() {
        return {
            tagIds: [],
            brandId: "",
            currentTab: 0,
            brandList: [],
            brandProducts: [],
            products: [],
        };
    },
    props: ["content"],
    methods: {
        loadProduct() {
            let params = new URLSearchParams();
            params.append("brandId", this.brandId);
            productList(params).then((response) => {
                this.products = response.data.data;
            });
        },
        loadBrand() {
            var _this = this;
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < this.tagIds.length; i++) {
                    this.tagIds[i] = parseInt(this.tagIds[i]);
                }
            }
            let params = new URLSearchParams();
            for (var i = 0; i < this.tagIds.length; i++) {
                params.append("tagIds", this.tagIds[i]);
            }
            list(params).then((response) => {
                response.data.data.forEach((item) => {
                    if (utils.isNull(item.logo)) {
                        item.logo =
                            "http://cdnx.hulu.fj.cn/00/0F/rBD_P13SAWKAMlqMAAAVjZ8qOaY963.jpg";
                    }
                });
                if (response.data.data.length > 0) {
                    this.brandList = response.data.data;
                    this.brandId = response.data.data[0].id;
                }
                this.loadProduct();
            });
        },
        swichNav: function (index, brandId) {
            var that = this;
            this.brandId = brandId;
            this.loadProduct();
            if (that.currentTab === index) {
                return false;
            } else {
                this.currentTab = index;
            }
        },
    },
    created() {
        this.loadBrand();
    },
    components: {
        noData,
    },
};
</script>

<style scoped>
/* pages/index/acrossBrand/acrossBrand.wxss */
.brand_content {
    margin-left: 10px;
    width: 355px;
    border-radius: 8px;
    display: flex;
    background-color: white;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
}

.brand_tittle_content {
    display: flex;
    justify-content: space-between;
}

.tittle {
    height: 17px;
    font-weight: 500;
    color: rgba(26, 26, 30, 1);
}

.subtitle_context {
    margin-top: 5px;
}

.subtitle_text {
    height: 11.5px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.5);
}

.hidden_swiper {
    overflow: hidden;
    margin-bottom: 12px;
}

.swiper-tab {
    width: 100%;
    text-align: center;
    overflow-x: auto;
    display: flex;
    margin-bottom: 10px;
    /* height: 60px; */
}

.swiper-tab-list {
    width: 110px;
    height: 68px;
    border: 1px solid rgba(213, 70, 51, 1);
    border-radius: 3px;
    flex-shrink: 0;
}

.on {
    color: blue;
    border-bottom: 3px solid blue;
}

.swiper-box {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.swiper-box view {
    text-align: center;
}

.brand_image_box :last-child {
    margin-right: 0px;
}

.brand_box {
    width: 52px;
    display: flex;
    flex-direction: column;
    margin-right: 25px;
}

.brand_box:last-child {
    width: 52px;
    display: flex;
    flex-direction: column;
    margin-right: 0px;
}

.brand_image_box {
    width: 55px;
    height: 34px;
    border: 1px solid rgba(209, 209, 211, 1);
    border-radius: 3px;
    padding: 5px 5px 5px 5px;
}

.brand_text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(215, 38, 28, 1);
    line-height: 20px;
    margin-top: 7.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 55px;
}

.brand_text_click {
    margin-top: 7.5px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 55px;
}

.brand_image_box_click {
    width: 55px;
    height: 34px;
    border: 1px solid rgba(213, 70, 51, 1);
    border-radius: 3px;
    padding: 5px 5px 5px 5px;
}

.hidden_brand_box {
    height: 340px;
    overflow: hidden;
    margin-bottom: 20px;
}

.brand_item_box {
    /*overflow-x: auto;*/
    display: flex;
    /*height: 180px;*/
    /* margin-top: 10px; */
}

.brand_item {
    margin-right: 12px;
    /*width: 206px;*/
}

.brand_item_image {
    width: 103px;
    height: 103px;
    background: linear-gradient(
        180deg,
        rgba(244, 243, 245, 1) 0%,
        rgba(250, 250, 250, 1) 100%
    );
    border-radius: 4px;
}

.brand_item_text {
    width: 96px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 1);
    line-height: 18px;
    margin-top: 9.5px;
    min-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.brand_item_price {
    height: 11.5px;
    font-size: 10px;
    font-weight: bold;
    color: rgba(231, 91, 83, 1);
    margin-top: 9px;
}

.demo-text-1 {
    background-color: aqua;
}

.demo-text-2 {
    background-color: black;
}

.demo-text-1 {
    background-color: gold;
}

.page-section-spacing {
    margin-top: 60px;
}
</style>
